<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import securitySvg from '@/assets/icon/security.svg';
import updateArrowsSvg from '@/assets/icon/update-arrows.svg';

const searchContent = ref("");

const icons = [{
  imgSrc: securitySvg,
  imgAlt: 'security',
  spanText: '信息安全'
},
{
  imgSrc: updateArrowsSvg,
  imgAlt: 'update-arrows',
  spanText: '免费退换'
}];
</script>

<template>
  <div class="top_bar">
    <router-link to="/login">你好，请登录</router-link>
    <router-link to="/register">免费注册</router-link>
  </div>
  <el-row class="header">
    <el-col :span="4" class="logo-container">
      <router-link to="/"></router-link>
    </el-col>
    <el-col :span="10" class="search-container">
      <div class="search">
        <el-input v-model="searchContent" style="width: 25rem;" placeholder="输入书名/作者/关键字" :suffix-icon="Search" />
      </div>
    </el-col>
    <el-col :span="6" class="icno-container">
      <div class="icons">
        <div class="icon" v-for="(item, index) in icons" :key="index">
          <img :src="item.imgSrc" :alt="item.imgAlt">
          <span>{{ item.spanText }}</span>
        </div>
      </div>

    </el-col>
    <el-col :span="4" class="cart-container">
      <div class="cart">
        <router-link to="/cart">购物车</router-link>
      </div>
    </el-col>

  </el-row>
</template>

<style scoped lang="scss">
.top_bar {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;

  a {
    color: #000;
    text-decoration: none;
    margin: 0 10px;

    &:hover {
      color: $xtxColor;
      text-decoration: none;
    }
  }
}

.header {
  height: 3.75rem;
  width: 100vw;
  line-height: 3.75rem;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  font-size: 1.25rem;

  .logo-container {
    height: 100%;
    background-color: #7da5a4;
    text-align: center;
    background-image: url("@/assets/images/logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    a {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }

  .search-container {
    height: 100%;
    background-color: #f5f7fa;
    text-align: center;
  }

  .icno-container {
    div {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 100%;
      margin-left: 2rem;
    }

    img {
      width: 2rem;
      height: auto;
      margin-right: 10px;
      background-color: transparent;
    }

    span {
      font-size: 12px;
      /* 减小字体大小 */
      line-height: 1;
      /* 减小行高 */
      color: #333;
      margin: 0;
      /* 移除默认外边距 */
      padding: 0;
      /* 移除默认内边距 */

    }
  }

  .cart-container {
    height: 100%;
    text-align: center;
    background-color: #f5f7fa;
    color: #fff;

    .cart {
      background-color: $xtxColor;
      line-height: 2.5rem;
      width: 6.25rem;
      height: 2.5rem;
      margin: 0.625rem auto;

      a {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }
  }

  .icno-container {
    height: 100%;
    background-color: #f5f7fa;
    text-align: center;
    font-weight: bold;

    a {
      margin: 0 0.625rem;
      color: #333;
    }
  }

}
</style>
